<template>
  <div class="Invoicing login">
    <div
      class="underline"
      style="width:120px;"
    >
      <span class="title1 color1 zIndex fontBold">{{ form.id ? '人员管理' : '添加人员' }}</span>
    </div>
    <div class="login_content">
      <div class="content">
        <div class="login_field">
          <van-cell-group>
            <van-field
              v-model="form.username"
              center
              required
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">
                  <span class="required">*</span> 姓名
                </span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="select.sex"
              center
              readonly
              is-link
              required
              @click="showSex"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">
                  <span class="required">*</span> 性别
                </span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.phone"
              center
              required
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">
                  <span class="required">*</span> 手机号
                </span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="select.role"
              center
              readonly
              is-link
              required
              @click="showRole"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">
                  <span class="required">*</span> 角色
                </span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.job"
              center
              required
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">
                  <span class="required">*</span> 职务
                </span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.nationality"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">国籍</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="select.card_type"
              center
              readonly
              is-link
              @click="showCardType"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">证件类型</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.card_number"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">证件号码</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.qq"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">QQ</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.email"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">邮箱</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.department"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">部门</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="select.education"
              center
              readonly
              is-link
              @click="showEducation"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">学历程度</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.graduation_school"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">毕业学校</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.graduation_time"
              center
              readonly
              is-link
              @click="dateVisible = true"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">毕业时间</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.major"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">所学专业</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.major_type"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">职称专业类别</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.certificate"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">专业证书等级</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.certificate_number"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">专业证书号码</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <div class="desc">
              <div class="content3 font400 color3">
                个人简介
              </div>
              <van-field
                class="textarea"
                v-model="form.desc"
                type="textarea"
                :autosize="{ minHeight: 60 }"
                placeholder
              />
            </div>
            <!-- <van-field
              v-model="form.desc"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">个人简介</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>-->
          </van-cell-group>
        </div>
      </div>
    </div>
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div
        class="font400 content3 color4"
        @click="back"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">
          返回
        </p>
      </div>
      <div
        class="font400 content3 color4"
        v-if="form.id"
        @click="detle"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-shanchu" />
        </svg>
        <p class="content2 font400 color3">
          删除
        </p>
      </div>
      <div
        @click="submit"
        :style="{ 'width': form.id ? '189px' : '242px' }"
        class="agree font400 content3 color4"
      >
        {{ form.id ? '修改' : '确认' }}
      </div>
    </div>
  </div>
  <Choose
    :columns="columns"
    :visible="visible"
    :type="type"
    @closeDialog="closeDialog"
    @confirmValue="confirmValue"
  />
  <!-- 毕业时间 -->
  <DatetimePicker
    :min-date="minDate"
    :max-date="maxDate"
    :date-visible="dateVisible"
    :type="type"
    :current-date="currentDate"
    @closeDate="closeDate"
    @confirmDate="confirmDate"
  />
  <!-- 多选角色 -->
  <CheckboxGroup
    :groupvisible="GroupVisible"
    :group="columnsGroup"
    @GroupDialog="GroupDialog"
  />
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import moment from 'moment'
import { personnelAdd, personnelCards, personnelEducations, getDemandType, personnelInfo, personnelEdit, personnelDel } from '@/api/index'
import { Toast, Dialog } from 'vant'
const Choose = defineAsyncComponent(() => import('@/components/Choose/index.vue'))
const DatetimePicker = defineAsyncComponent(() => import('@/components/DatetimePicker/index.vue'))
const CheckboxGroup = defineAsyncComponent(() => import('@/components/CheckboxGroup/index.vue'))
const router = useRouter()
const route = useRoute()
const store = useStore()
const visible: any = ref(false)
const columns: any = ref([])
const columnsGroup: any = ref([])
const dateVisible: any = ref(false)
const GroupVisible: any = ref(false)
const type: any = ref(0)
const currentDate: any = new Date()
const form: any = ref({
  username: '',
  sex: '',
  phone: '',
  role: [],
  nationality: '',
  card_type: '',
  card_number: '',
  qq: '',
  email: '',
  department: '',
  education: '',
  graduation_school: '',
  graduation_time: '',
  major: '',
  major_type: '',
  certificate: '',
  certificate_number: '',
  desc: ''
})

const select = ref({
  sex: '',
  card_type: '',
  education: '',
  address: '',
  role: ''
})

const minDate = computed(() => {
  // const curDate = (new Date()).getTime()
  // const one = 7 * 24 * 3600 * 1000
  // const oneYear = curDate + one
  return new Date(1990, 0, 1)
})

const maxDate = computed(() => {
  const curDate = (new Date()).getTime()
  const one = 180 * 24 * 3600 * 1000
  const oneYear = curDate + one
  return new Date(oneYear)
})

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const detle = async () => {
  Dialog.confirm({
    title: '温馨提示',
    message: '此操作会删除该用户'
  })
    .then(async () => {
      // on confirm
      try {
        await personnelDel({ personnel_id: form.value.id })
        back()
      } catch (error: any) {
        Toast(error.message)
      }
    })
    .catch(() => {
      // on cancel
    })
}

const getInfo = async () => {
  try {
    form.value = await personnelInfo({ personnel_id: route.query.id })
    select.value.sex = form.value.sex_name
    select.value.role = form.value.role_name
    select.value.card_type = form.value.card_type_name
    select.value.education = form.value.education_name
  } catch (error: any) {
    // Toast(error.message)
  }
}

getInfo()

const closeDialog = () => {
  visible.value = false
}

// 性别
const showSex = () => {
  columns.value = ['男', '女']
  type.value = 1
  visible.value = true
}

// 角色
const showRole = async () => {
  columnsGroup.value = await getDemandType({ type: 'user' })
  GroupVisible.value = true
}

// 选中角色
const GroupDialog = (val: any) => {
  console.log(val)
  form.value.role = val.map((item: any) => item.id)
  select.value.role = val.map((item: any) => item.name)
  GroupVisible.value = false
}

// 证件类型
const showCardType = async () => {
  columns.value = await personnelCards()
  type.value = 3
  visible.value = true
}

// 学历程度
const showEducation = async () => {
  columns.value = await personnelEducations()
  type.value = 4
  visible.value = true
}

// 毕业时间
const closeDate = () => {
  dateVisible.value = false
}

const confirmDate = (val: any) => {
  form.value.graduation_time = moment(val).format('YYYY-MM-DD')
  dateVisible.value = false
}

const confirmValue = (val: any, type: any, index: any) => {
  if (type === 1) {
    form.value.sex = index + 1
    select.value.sex = val
  } else if (type === 3) {
    form.value.card_type = val.id
    select.value.card_type = val.name
  } else if (type === 4) {
    form.value.education = val.id
    select.value.education = val.name
  }
  visible.value = false
}

const submit = async () => {
  try {
    if (form.value.id) {
      await personnelEdit({ ...form.value, personnel_id: form.value.id })
      Dialog.alert({
        title: '温馨提示',
        message: '修改成功'
      }).then(() => {
        if (store.state.from.path !== '/') {
          router.back()
        } else {
          router.replace('/enterprise/personnel')
        }
      })
    } else {
      await personnelAdd({ ...form.value })
      Dialog.alert({
        title: '温馨提示',
        message: '提交成功'
      }).then(() => {
        if (store.state.from.path !== '/') {
          router.back()
        } else {
          router.replace('/enterprise/personnel')
        }
      })
    }
  } catch (error: any) {
    Toast(error.message)
  }
}

</script>

<style lang="less" scoped>
.Invoicing {
  padding: 0 30px 80px;
  margin-top: 40px;
  .login_content {
    margin-top: 20px;
    .login_field {
      margin-top: 20px;
    }
  }
  .leftw {
    width: 90px;
    display: inline-block;
  }
  .line {
    margin: 0 10px;
  }
  .setBnt {
    width: 98px;
    height: 30px;
    background: #12142e;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
  }
}
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 242px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}

.desc {
  background-color: #fff;
  padding: 15px;
  padding-left: 15px;
  border-radius: 5px;
  .content3 {
    margin-bottom: 15px;
  }
}
.required {
  color: red;
}
@media (min-width: 750px) {
  .Invoicing {
  padding: 0 30px 80px;
  margin-top: 40px;
  .login_content {
    margin-top: 20px;
    .login_field {
      margin-top: 20px;
    }
  }
  .leftw {
    width: 90px;
    display: inline-block;
  }
  .line {
    margin: 0 10px;
  }
  .setBnt {
    width: 98px;
    height: 30px;
    background: #12142e;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
  }
}
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 242px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}

.desc {
  background-color: #fff;
  padding: 15px;
  padding-left: 15px;
  border-radius: 5px;
  .content3 {
    margin-bottom: 15px;
  }
}
.required {
  color: red;
}
}
</style>
